
<style lang="scss" scoped>
    .f8{
        background: #F8F8F8;
    }
    nav{
        background: #F8F8F8;
        line-height: 50px;
    }
    .logo {
        img{
            width: 45px;
            margin-right: 20px;
        }
    }
    .active{
        font-size: 14px;
        color: var(--blue);
        position: relative;
        &::after{
            content: "";
            display: block;
            width:100%;
            height: 4px;
            position:absolute;
            bottom: 6px;
            border-radius: 2px;
            background: var(--blue);
        }
    }
    a:hover{
        text-decoration: none;
    }
    .dropup{
        position: relative;
        .user{
            cursor: pointer;
            img{
                width:30px;
            }
            .text{
                margin:0 6px 0 10px 
            }
        }
        ul{
            width:120px;
            position:absolute;
            z-index: 1;
            top: 60px;
            left: 0;
            background: #fff;
            li{
                cursor: pointer;
                margin:auto;
                height: 50px;
                font-size: 14px;
                color: #333;
                line-height: 50px;
                width:90%;
                text-align: center;
                border-bottom: 1px solid #eee;
                h6{
                    width:100%;
                    font-size: 14px;
                    color: #333;
                    line-height:26px;
                    overflow:hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                }
                p{
                    line-height:0;
                    margin:0;
                    padding: 0;
                }
                &:last-child{
                    color: #999;
                    border:0
                }
            }
        }
    }
    .meun span{
        cursor: pointer;

    }
</style>

<template>
    <div class="top">
        <nav>
            <div class="container f8">
                <div class="row" >
                    <div class="col-lg-2 flex logo" >
                        <img src="@/assets/logo.svg" >
                        <p style=" margin: 0;">知产管家</p>
                    </div>

                    <div class="col-lg-offset-4 col-lg-6">
                        <div class="flex around meun">
                            <a  :class="{active:current==='index'}" href="/">首页</a>
                            <span v-if="!userInfo" @click="$router.push('login')" >免费注册</span>
                            <span v-if="!userInfo" @click="$router.push({name:'login',query:{active:1}})">登陆平台</span>
                            <router-link v-if="current!=='activity'" to="activity">99元外观特价</router-link>
                            <a href="http://wpa.qq.com/msgrd?v=1&uin=2096345456&site=qq&menu=yes" target="_blank">在线咨询</a>
                            <!-- <a href="#">关于我们</a> -->
                            <div class="dropup" v-if="userInfo" @mouseover="dropup=true"  >
                                <div class="user">
                                    <img src="@/assets/face1.png">
                                    <span class="text">{{userInfo[0] || userInfo[1]}}</span>
                                    <span class="caret"></span>
                                </div>
                                <ul v-show="dropup" @mouseout="dropup=false">
                                    <li>
                                        <h6>{{userInfo[0]}}</h6>
                                        <p>{{userInfo[1]}}</p>
                                    </li>
                                    <li><a :href="cms" target="_blank">登陆平台</a></li>
                                    <li @click="logout">退出登陆</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </nav>

        
    </div>
</template>
<script>
export default {
    props:{
        current:{
            default:function(){
                return this.$route.name
            }
        }
    },
    data(){
        return {
            userInfo:null,
            dropup:false,
        }
    },
    methods:{
        logout(){
            localStorage.clear()
            this.$router.go(0)
        }
    },
    created(){
        const tel=localStorage.getItem('tel')
        const name=localStorage.getItem('name')
        if(tel)
            this.userInfo=[name,tel]
    }
}
</script>

